<template>
  <section class="nb-depart">
    <div class="department-content" @click="getDepartment">
      {{name || title}}
      <span v-show="name" @click.stop="deleteName" class="el-icon-error"></span>
    </div>
    <!--<el-button plain @click="getDepartment" size="small" type="primary">{{title}}</el-button>-->
    <el-dialog
      :title="title"
      width="70%" top="5vh"
      :visible.sync="departVisible"
      :append-to-body="true"
    >
      <se-content disabled style="padding-top: 0;">
        <el-form ref="form">
          <se-form
            placeholder="搜索姓名"
            v-model="queryModel.name"
          ></se-form>
          <se-form
            placeholder="搜索员工编号"
            v-model="queryModel.employeeNo"
          ></se-form>
          <se-form
            placeholder="搜索手机号"
            v-model="queryModel.mobile"
          ></se-form>
          <se-form
            placeholder="搜索证件号"
            v-model="queryModel.documentNo"
          ></se-form>
        </el-form>
        <template slot="button">
          <el-button type="primary" @click="query">查询</el-button>
          <!--<el-button @click="resetQuery">重置</el-button>-->
        </template>
      </se-content>

      <el-tree
        :data="departmentList"
        :props="defaultProps"
        @node-click="handleNodeClick"
        :render-content="renderContent"
        ref="tree"
        class="depart-tree"
      ></el-tree>
      <div slot="footer" class="dialog-footer">
        <nb-button large type="plain"  @click="departVisible = false">取 消</nb-button>
        <nb-button  large type="primary" @click="confirm">确 定</nb-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
  import SeForm from '@/components/se-form'
  import SeContent from '@/components/se-content'
  import Mixin from '@/common/mixin'
  export default {
    data () {
      return {
        departVisible: false,
        departmentList: [],
        defaultProps: {
          children: 'subDepts',
          label: 'name'
        },
        manager: '',
        queryModel: {
          name: '',
          mobile: '',
          employeeNo: '',
          documentNo: ''
        },
        name: this.value
      }
    },
    props: {
      title: {
        type: String,
        default: '选择活动负责人'
      },
      value: String
    },
    mixins: [Mixin],
    components: {
      SeForm,
      SeContent
    },
    watch: {
      value () {
        this.name = this.value
      }
    },
    methods: {
      getDepartment () {
        this.departVisible = !this.departVisible
        if (this.departVisible) {
          this.$nextTick(() => {
            this.reset(this.$refs.form)
          })
        }
      },
      deleteName () {
        this.name = ''
        this.$emit('close')
        this.$emit('input', this.name)
      },
      query () {
        this.fetch()
      },
      fetch () {
        this.$store.dispatch('DEPARTMENT_LIST', {param: this.queryModel}).then(res => {
          if (res.success) {
            this.mapData(res.data)
            this.departmentList = res.data
          }
        })
      },
      mapData (data) {
        data.map(item => {
          if (item.subDepts && item.subDepts.length) {
            this.mapData(item.subDepts)
          }
          if (item.memberInfos && item.memberInfos.length) {
            item.subDepts = item.subDepts.concat(item.memberInfos)
          }
        })
      },
      handleNodeClick (data, node, e) {
      },
      confirm () {
        if (!this.manager) {
          this.$message.warning('您未选择负责人！')
        } else {
          this.$emit('getManager', this.manager)
          this.getDepartment()
        }
      },
      clickRow (data, t) {
        if (data.hasOwnProperty('manager')) {
          this.manager = data
          let sublings = this.$refs.tree.$el.getElementsByClassName('row-child')
          for (let i = 0; i < sublings.length; i++) {
            sublings[i].childNodes[0].className = ''
            sublings[i].parentNode.className = 'row-wrapper'
          }
          t.target.childNodes[0].className = 'fa fa-check-circle'
          t.target.parentNode.className = 'row-wrapper isSelect'
        }
      },
      renderContent (h, { node, data, store }) {
        return (
          <div
            class='row-wrapper'
          >
          {
            data.hasOwnProperty('manager') ? <div
              class='row-child'
                onClick={this.clickRow.bind(this, data)}
              >
              <i class=''></i>
            </div> : ''
          }

            <span>
              {data.manager === 1 ? <span class='manager'></span> : ''}
              {data.manager === 0 ? <span class='manager manager2'></span> : ''}
              {data.hasOwnProperty('manager') ? <el-tag size="mini">{node.label}</el-tag> : <span>{node.label}</span>}
              &nbsp;{data.code} {data.employeeNo} {data.mobile} {data.documentNo} {data.positionName}
            </span>
          </div>
        )
      }
    },
    mounted () {
      this.fetch()
    }
  }
</script>

<style lang="scss" >
  .depart-tree{
    height: 700px;
    overflow-y: auto;
  }
  .nb-depart{
    width: 100%;
    .el-dialog__wrapper{
      z-index: 2300 !important;
    }
    .department-content{
      display: block;
      padding: 0 10px;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      min-height: 40px;
      /* border: 1px solid red; */
      border: 1px solid #d8dce5;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width: 100%;
      border-radius: 4px;
      line-height: 40px;
      color: #5a5e66;
      font-size: 14px;
      cursor: pointer;
      position: relative;
      .el-icon-error{
        position: absolute;
        right: 10px;
        top: 12px;
        font-size: 14px !important;
        color: #5a5e66;
        cursor: pointer;
      }
    }
  }
  .manager{
    display:inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../assets/image/st_node2.png');
    vertical-align: middle;
    margin-right: 10px;
  }
  .manager2{
    background-image: url('../assets/image/st_node.png');
  }
  .row-wrapper{
    width: 100%;
    position: relative;
    .row-child{
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      text-align: right;
      i{
        color: #409EFF;
        display: inline-block;
      }
    }
  }
  .row-wrapper.isSelect{
    background: #f0f7ff;
  }

</style>
